<template>
	<view class="wrap">
		<view class="wrap__header">
			<uni-icons type="left" size="24" color="#fff" @click="backClick"></uni-icons>
			<text class="header__title">{{$t('trade.buy')}}</text>
			<image src="@/static/icons/history.png" mode="widthFix" class="header__icon" @click="goInMoneyHistory"></image>
		</view>
		<view class="wrap__option">
			<view class="option__item">
				<view class="item__title">{{$t('trade.sub')}}</view>
				<view class="item__main" v-if="typeOptions.length">
					<text class="main__title">{{$t('trade.way')}}</text>
					<picker mode="selector" :range="typeOptions" @change="typeChange" range-key="show_name" class="title__picker">
						<view class="main__value main__type" v-if="typeOptions[typeIndex]">
							<text class="value__title">{{typeOptions[typeIndex].show_name}}</text> 
							<uni-icons type="bottom" size="20" color="#fff"></uni-icons>
						</view>
					</picker>
				</view>
				<view class="item__main">
					<text class="main__title">{{$t('trade.amount')}}</text>
					<view class="main__value">
						<uni-number-box v-model="amount" :step="0.1" :max="maxAmount" :min="minAmount" background="#458EF4" color="#fff"/>
					</view>
				</view>
			</view>
		<!-- 	<view class="option__item">
				<view class="item__title">{{$t('trade.explain')}}</view>
				<view class="item__main" @click="copyClick(bankInfo.username)">
					<text class="main__title">{{$t('trade.account')}}：</text>
					<view class="main__right">{{bankInfo.username}}</view>
					<image src="@/static/icons/add_icon.png" mode="widthFix" class="main__icon"></image>
				</view>
				<view class="item__main" @click="copyClick(bankInfo.bank_code)">
					<text class="main__title">{{$t('trade.cardNum')}}：</text>
					<view class="main__right">{{bankInfo.bank_code}}</view>
					<image src="@/static/icons/add_icon.png" mode="widthFix" class="main__icon"></image>
				</view>
				<view class="item__main" @click="copyClick(bankInfo.bank_name)">
					<text class="main__title">{{$t('trade.bankName')}}：</text>
					<view class="main__right">{{bankInfo.bank_name}}</view>
					<image src="@/static/icons/add_icon.png" mode="widthFix" class="main__icon"></image>
				</view>
				
				 <view class="item__main" @click="copyClick(bankInfo.bank_add)">
					<text class="main__title">BankAdd：</text>
					<view class="main__right">{{bankInfo.bank_add}}</view>
					<image src="@/static/icons/add_icon.png" mode="widthFix" class="main__icon"></image>
				</view> 
				
				<view class="item__main" @click="copyClick(bankInfo.sort_code)">
					<text class="main__title">支店番号：</text>
					<view class="main__right">{{bankInfo.sort_code}}</view>
					<image src="@/static/icons/add_icon.png" mode="widthFix" class="main__icon"></image>
				</view> 
				
				
				
				<view class="item__main">
					<text class="main__title">{{$t('trade.mark')}}：</text>
					<view class="main__right">{{bankInfo.remark}}</view>
				</view>
			</view> -->
			
			<view class="option__item">
				<view class="item__main1">
					
					<image :src="bankInfo.ifsc" mode="widthFix" ></image>
				</view> 
				
				<view class="item__main" >
				
					<view  style="text-align: center;margin: 0 auto;color: #fff;">{{$t('locale.kf3')}}
					 
							<span > {{$t('locale.kf2')}}</span>
							<br/>
					  <span @click="jump()" style="font-size: 42rpx;color: #4278C8;font-weight: 700;">{{$t('locale.kf')}}</span>
					 
					 
					
					</view>
				</view> 
				
			</view>
			<view class="option__item">
				<view class="item__title">{{$t('trade.limit')}}</view>
				<view class="item__main">
					<text class="main__title">{{$t('trade.min')}}：</text>
					<view class="main__right">{{minAmount}}</view>
				</view>
				<view class="item__main">
					<text class="main__title">{{$t('trade.max')}}：</text>
					<view class="main__right">{{maxAmount}}</view>
				</view>
				<view class="item__tips">
					{{remarkInfo}}
				</view>
			</view>
			<view class="option__item">
				<view class="item__title">{{$t('trade.screenshot')}}
					<text class="title__text">({{$t('trade.uploadTips')}})</text>
				</view>
				<view class="item__upload" @click="uploadClick">
					<image :src="imageUrl" mode="aspectFill" class="upload__img" v-if="imageUrl"></image>
					<image src="@/static/imgs/upload_img.png" mode="aspectFill" class="upload__img" v-else></image>
				</view>
				<view class="item__btn">
					<text class="btn__text" @click="subClick">{{$t('trade.buySubBtn')}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				amount:"", //金额
				typeOptions:[], //入金方式
				typeIndex:0, 
				bankInfo:{}, //银行信息
				amountRange:{}, //金额限制
				remarkInfo:"", //提示信息
				maxAmount:0,
				minAmount:0,
				imageUrl:"", //图片显示地址
				paramImgUrl:"", //参数图片URL
				id:"", //市场分类id
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getRechargeInfo()
		},
		methods:{
			jump(){
				window.location.href = this.bankInfo.bank_fen
			},
			goInMoneyHistory(){
				uni.navigateTo({
					url:'/pages/trade/inMoney'
				})
			},
			// 图片上传
			uploadClick(){
				uni.chooseImage({
					count: 1, //默认1
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success:  async(res)=> {
						let file = res.tempFilePaths[0]
						let result = await this.$api.uploadImg(file)
						let parseRes = result ? JSON.parse(result) : {}
						if(parseRes.code === 1 && parseRes.data){
							this.imageUrl = parseRes.data.fullurl
							this.paramImgUrl = parseRes.data.url
						}else{
							uni.showToast({
								title: result.msg,
								icon:"none"
							})
						}
					}
				});
			},
			//入金提交
			async subClick(){
				let {id = 1} = this
				let params = {
					money:this.amount,
					image:this.paramImgUrl,
					category_id:id
				}
				uni.showLoading({
					title:this.$t('loading.loading'),
					mask:true
				})
				let res = await this.$api.subRechargeInfo(params)
				uni.hideLoading()
				if(res.code === 1){
					uni.showToast({
						title:this.$t('success.success'),
						icon:"success",
						mask:true
					})
				// 更新用户数据
				this.$store.dispatch("user/getUserInfo")
				// 返回持倉
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/trade/trade'
					})
				}, 1500)
				}else{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			},
			// 类型切换
			typeChange(e){
				let {value} = e.detail
				this.typeIndex = value
				this.id = this.typeOptions[value].id
				this.getRechargeInfo()
			},
			// 获取入金信息
			async getRechargeInfo(){
				let res = await this.$api.getRechargeInfo(this.id)
				if(res.code === 1 && res.data){
					let {max_anount, min_anount} = res.data.amount_range
					this.maxAmount = max_anount * 1
					this.minAmount = min_anount * 1
					this.amount = this.minAmount
					this.typeOptions = res.data.class
					this.bankInfo = res.data.bank
					this.remarkInfo = res.data.remark
				}
			},
			backClick(){
				uni.switchTab({
					url:"/pages/trade/trade"
				})
				/* let canNavBack = getCurrentPages()
				if( canNavBack && canNavBack.length>1) {  
					uni.navigateBack() 
				} else {  
				    history.back();  
				} */
			},
			// 复制切换
			copyClick(title){
				uni.setClipboardData({
					data: title,
					success:()=>{
						uni.showToast({
							title:this.$t('success.success'),
							mask:true
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		background: #161827;
		&__header{
			height: 128rpx;
			background: #161827;
			@include flexRowAlign(space-between);
			padding: 0 30rpx;
			box-sizing: border-box;
			.header__title{
				flex: 1;
				font-size: 46rpx;
				font-weight: 800;
				color: #fff;
				text-align: center;
			}
			.header__icon{
				width: 42rpx;
				height: 42rpx;
			}
		}
		&__option{
			margin-top: 30rpx;
			.option__item{
				background:  #161827;
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				.item__title{
					@include flexRowAlign();
					padding-top: 40rpx;
					box-sizing: border-box;
					font-size: 36rpx;
					font-weight: 800;
					color: #fff;
					&:before{
						content: "";
						margin-left: 10rpx;
						width: 6rpx;
						height: 30rpx;
						background: #458EF4;
						margin-right: 12rpx;
					}
					.title__text{
						font-size: 26rpx;
						color: #999999;
						margin-left: 10rpx;
					}
				}
				
				.item__main1{
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 25%;
					width: 50%;
				}
				.item__main{
					@include flexRowAlign();
					// height: 98rpx;
					margin-top: 40rpx;
					
					.main__title{
						font-size: 32rpx;
						font-weight: 500;
						color: #fff;
					}
					.main__right{
						font-size: 32rpx;
						font-weight: 500;
						color: #fff;
					}
					.main__icon{
						width: 30rpx;
						height: 30rpx;
						margin-left: 20rpx;
					}
					.title__picker{
						flex: 1;
					}
					.main__value{
						flex: 1;
						width: 100%;
					  @include flexRowAlign(flex-end);
						::v-deep .uni-numbox__value{
							width: 280rpx;
							height: 68rpx;
							border-radius: 6rpx;
						}
						::v-deep .uni-numbox-btns{
							display: none;
						}
					}
					.main__type{
						width: 100%;
						justify-content: flex-end;
						.value__title{
							font-size: 32rpx;
							font-weight: 500;
							color: #FFFFFF;
							margin-right: 50rpx;
						}
					}
				}
				.item__upload{
					margin-top: 30rpx;
					.upload__img{
						width: 222rpx;
						height: 222rpx;
						border-radius: 8rpx;
					}
				}
				.item__tips{
					font-size: 28rpx;
					font-weight: 500;
					color: #458EF4;
					padding-bottom: 40rpx;
				}
				.item__btn{
					margin-top: 60rpx;
					padding-bottom: 60rpx;
					@include flexRowAlign(center);
					.btn__text{
						@include flexCenter();
						width: 600rpx;
						height: 98rpx;
						background: #458EF4;
						border-radius: 12rpx;
						font-size: 36rpx;
						font-weight: 800;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>